<template>
    <div class="tableNumber" >
        <!-- 上半部分 -->
        <div class="tableTop">
            <!-- 选项 -->
            <div class="tableNav">
                <div @click="tab(0)">台桌一</div>
                <div @click="tab(1)">台桌二</div>
                <div @click="tab(2)">台桌三</div>
                <div @click="tab(3)">台桌四</div>
            </div>
            <!-- 路单 -->
            <div class="tabsLudan">
                    <div class="show" v-moveLD="b"  v-html="b.html"></div>
            </div>
        </div>
        <!-- 下半部分 -->
        <div class="tableFloor">
            <!-- 房名 -->
            <span class="roomName">{{center.RoomName}}</span>
            <!-- 时间 -->
            <div class="times">
                {{center.RestHops}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"GameOptionSon",
    props:["id"],
	data(){
		return {
			b:{html:""},
			timeSet:null,
		}
	},
	computed:{
		center(){
			return this.$store.getters["RoomStore/tables"][this.id.pos][this.id.index];
		},
	},
	watch:{
		"center.LuDan"(newVal,oldVal){
			if(newVal!=oldVal){
				if(newVal.data===''){
					this.b.html="<div class='show'></div>";
				}else if(newVal.length<oldVal.length){
					this.b.html="<div class='show'></div>";
					this.$emit("postMessage",{data:newVal,model:this.center.GType,room:this.id.index});
				}else{
					this.$emit("postMessage",{data:newVal,model:this.center.GType,room:this.id.index});
				}
			}
		},
		"center.RestHops":function(newVal,oldVal){
			if(newVal==0){
				clearInterval(this.timeSet);
			}
		},
		"center.CurrState":function(newVal,oldVal){
			if(newVal==2){
				this.satrSet();
			}
		}
	},
	directives:{
		moveLD:{
			update(el,bind){
				if(bind.value!=bind.oldValue){
					var chil=el.childNodes;
					if(chil.length<=1){
						return false;
					}
					var leftPosi=parseInt(chil[chil.length-1].style.left);
					var left=bind.value.divWdith;
					var width=parseInt(chil[1].style.width);
					var leftWidth=((leftPosi+width-35)*-0.01)*parseInt(el.clientWidth);
					chil[0].style.width=Math.ceil((left+width)*0.01)*100+"%";
				if(left>95){
						el.style.left=leftWidth+"px";
					}else{
						el.style.left="0px";
					}
				}
			}
		}
	},
	methods:{
		tab(index){
			let a=this.$store.getters.ManyGame;
			let b=[];
			let c="";
			for(let i=0;i<a.length;i++){
				b[i]=a[i].TId;
				if(b[i]==this.center.TId){
					this.$store.commit('changeTips',{data:"此台桌已存在，请重新选择"});
					return false;
				}
			}
			// 被替换的桌位号
			let oldTId=b[index]
			// 替换的桌位号
			b[index]=this.center.TId;
			c=b.join("-");
			window.ioSocket.emit('unsubscribe',"RoomBroadCastAfterTZ"+oldTId);
			window.ioSocket.emit('subscribe',"RoomBroadCastAfterTZ"+this.center.TId);
			window.userSocket.uSend('{"RandCode":"'+RandCode+'","ConnectionId":"","ActType":30,"UId":"'+UserId+'","ErrorCode":10000,"Content":{"OldTids":"","NewTids":"'+c+'"}}');
		},
		satrSet(){
			this.timeSet?clearInterval(this.timeSet):false;
			this.timeSet=setInterval(()=>{
				this.$store.commit("RoomStore/reduce",{id:this.id.pos,index:this.id.index});
			},1000)
		},
		setLudan(x){
			this.b=x;
		}
	},
	mounted(){
		if(this.center.CurrState==2&&this.center.RestHops!=0){
			this.satrSet();
		}
		if(this.center.LuDan!=''){
			this.$emit("postMessage",{data:this.center.LuDan,model:this.center.GType,room:this.id.index})
		}
	},
	beforeDestroy(){
		clearInterval(this.timeSet);
	}
}
</script>

